@import url(./base.less);
@rootSize: 37.5rem;
body {
  width: 100%;
  height: (1870 / @rootSize);
  background-color: #fff;
}
.head-box {
  padding: 0 (24 / @rootSize);

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: (40 / @rootSize);
  background-color: #ccc;
  p {
    font-size: (14 / @rootSize);
    color: #353535;
    margin-right: (15 / @rootSize);
  }
  .pic {
    img {
      width: (20 / @rootSize);
      height: (20 / @rootSize);

      margin-left: (40 / @rootSize);
    }
  }
  input {
    flex: 1;
    height: (28 / @rootSize);
    background: url(../icons/header_search.png) no-repeat;
    background-position: (19 / @rootSize) center;
    background-size: (12 / @rootSize) auto;
    border-radius: (17 / @rootSize);
    padding-left: (56 / @rootSize);
  }
}

.banner {
  height: (135 / @rootSize);
  margin-right: (10 / @rootSize);
  margin-top: (15 / @rootSize);
  .pic {
    img {
      width: 100%;
      height: 100%;
      padding: (10 / @rootSize) (20 / @rootSize) (40 / @rootSize);
    }
  }
}
.titm {
  display: flex;
  width: 100%;
  height: (100 / @rootSize);
  background-color: aliceblue;
  margin-top: (20 / @rootSize);
  .left {
    img {
      width: (160 / @rootSize);
      height: (70 / @rootSize);
      margin-left: (16 / @rootSize);
      margin-top: (20 / @rootSize);
      border: 1px solid #fff;
    }
  }
  .right {
    img {
      width: (160 / @rootSize);
      height: (70 / @rootSize);
      margin-left: (16 / @rootSize);
      margin-top: (20 / @rootSize);
    }
  }
}
.min {
  width: 100%;
  height: (250 / @rootSize);
  background-color: #fff;
  .table {
    display: flex;
    justify-content: space-between;
    margin: (40 / @rootSize) (15 / @rootSize) (20 / @rootSize) (14 / @rootSize);
    h1 {
      flex: 1;
      font-size: (16 / @rootSize);
    }
    p {
      margin-top: (10 / @rootSize);
      width: (10 / @rootSize);
      height: (10 / @rootSize);
    }
  }
}
.map {
  width: 100%;
  height: (170 / @rootSize);
  background-color: #fff;
  margin-right: (16 / @rootSize);
  margin-top: (35 / @rootSize);
  margin-bottom: (5 / @rootSize);
  .pic {
    img {
      width: 100%;
      height: 100%;
      padding: (10 / @rootSize) (20 / @rootSize);
    }
  }
}
.nav {
  width: 100%;
  height: (30 / @rootSize);
  background-color: #fff;
  display: flex;
  .top {
    width: 100%;
    height: (55 / @rootSize);
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: (30 / @rootSize);
    .top-left {
      p {
        margin-left: (20 / @rootSize);
        font-size: (16 / @rootSize);
        color: #353535;
      }
    }
    .top-right {
      p {
        margin-right: (40 / @rootSize);
        font-size: (16 / @rootSize);
        color: #353535;
        i {
          font-size: (16 / @rootSize);
          color: #ccc;
          font-style: normal;
          margin-left: (18 / @rootSize);
        }
      }
    }
  }
}
.list {
  width: 100%;
  height: (160 / @rootSize);
  background-color: #fff;
  padding: (16 / @rootSize) (20 / @rootSize) (20 / @rootSize);
  display: flex;
  justify-content: flex-start;
  margin-top: (2 / @rootSize);
  .left {
    img {
      width: (130 / @rootSize);
      height: (112 / @rootSize);
    }
  }
  .right {
    padding-left: (16 / @rootSize);
    width: (230 / @rootSize);
    p {
      margin-top: (8 / @rootSize);
      font-size: (9 / @rootSize);
      color: #ccc;
      white-space: nowrap;
    }
    i {
      white-space: nowrap;
      font-style: normal;
      font-size: (16 / @rootSize);
      font-weight: 800;
      color: #353535;
    }
    .tab {
      display: flex;
      span {
        width: (45 / @rootSize);
        height: (20 / @rootSize);
        border: 1px solid #ccc;
        background-color: #fff;
        display: flex;
        border-radius: (3 / @rootSize);
        font-size: (12 / @rootSize);
        color: #ccc;
        margin-left: (15 / @rootSize);
      }
    }
    .fob {
      span {
        color: orange;
        font-size: (20 / @rootSize);
        margin-right: (8 / @rootSize);
      }
    }
  }
}
.text {
  margin: (24 / @rootSize) (60 / @rootSize) (24 / @rootSize) (50 / @rootSize);

  .msk {
    border-radius: (38 / @rootSize);
    font-size: (15 / @rootSize);
    color: #353535;
    background-color: #ccc;
    text-align: center;
    line-height: (38 / @rootSize);
    margin-bottom: (10 / @rootSize);
  }
}
.price {
  margin: (24 / @rootSize) (30 / @rootSize) (12 / @rootSize) (18 / @rootSize);
  .pic {
    width: (320 / @rootSize);
    height: (80 / @rootSize);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.foot {
  margin-top: (12 / @rootSize);
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: (60 / @rootSize);
  background-color: #fff;
  a {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    object-fit: cover;
    color: #353535;
    img {
      width: (20 / @rootSize);
      height: (10 / @rootSize);
      margin-top: (9 / @rootSize);
      margin-bottom: (7 / @rootSize);
    }
    p {
      font-size: (12 / @rootSize);
      color: #353535;
    }
  }
}
